<template>
  <div class="role">
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="paramFrom.yourName" size="mini" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="paramFrom.email" size="mini" />
        </el-form-item>
        <!-- <el-form-item label="回复内容">
          <el-input v-model="paramFrom.replyContent" size="mini" />
        </el-form-item>
        <el-form-item label="是否回复">
          <el-select v-model="paramFrom.accountSource" size="mini" placeholder="请选择">
            <el-option label="未回复" value="1" />
            <el-option label="已回复" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="回复时间">
          <el-date-picker v-model="paramFrom.replyTime" type="date" placeholder="选择日期" size="mini">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="mini" @click="query">查询</el-button>
        </el-form-item>
        <!-- <el-form-item style="float: right">
          <el-button type="primary" size="mini" @click="addCoupon">新增优惠卷</el-button>
        </el-form-item> -->
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <!--      <el-row type="flex" justify="end" style="margin-bottom: 15px;">-->
      <!--        <el-button type="primary" size="mini" @click="btnOK">添加员工</el-button>-->
      <!--      </el-row>-->
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="yourName" align="center" label="姓名" width="130px" />
        <el-table-column prop="email" align="center" label="邮箱" width="200px">
        </el-table-column>
        <el-table-column prop="subject" align="center" label="主题" width="150px" />
        <el-table-column prop="yourMessage" align="center" label="留言" width="250px">
        </el-table-column>
        <el-table-column prop="creationTime" align="center" label="创建时间" width="200px" />
        <el-table-column prop="reply" align="center" label="是否回复">
          <template v-slot="{ row }">
            <el-button v-if="row.reply === 1" type="text" @click="EditBtu(row)">未回复</el-button>
            <span v-if="row.reply === 2">已回复</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120px">
          <template v-slot="{ row }">
            <el-button type="text" @click="detail(row)">详情</el-button>
            <el-button type="text" @click="delBtn(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <paging :page-size="paramFrom.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    </el-card>
    <!-- 删除弹框 -->
    <el-dialog title="删除" :visible="showVisible" width="30%" :before-close="handleClose">
      <div style="text-align: center;line-height: 30px">
        <span style="font-size: 16px;">你确定要删除这个email吗</span>
      </div>

      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="delBtnOK">确 定</el-button>
      </el-row>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog title="详情" :visible="detailVisible" width="30%" :before-close="handleCloseDetail">
      <div style="line-height: 30px">
        <el-form>
          <el-form-item label="回复内容">
            <el-input v-model="detailFrom.replyContent" size="mini" type="textarea" :disabled="true"
              :autosize="{ minRows: 5, maxRows: 10 }" />
          </el-form-item>
          <el-form-item label="回复时间">
            <el-input v-model="detailFrom.replyTime" size="mini" :disabled="true" />
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 回复弹窗 -->
    <el-dialog title="回复" :visible.sync="EditVisible" width="30%" :before-close="handleCloseEdit">
      <el-form label-width="80px" :rules="rules" ref="editFrom" :model="editFrom">
        <el-form-item label="邮箱" prop="email" style="margin-bottom: 20px;">
          <el-input v-model="editFrom.email" size="mini" :disabled="true" />
        </el-form-item>
        <el-form-item label="回复内容" prop="mailContent">
          <el-input v-model="editFrom.mailContent" size="mini" type="textarea"
            :autosize="{ minRows: 5, maxRows: 10 }" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseEdit" size="mini">取 消</el-button>
        <el-button type="primary" @click="EditOk" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEmailListArr, deleteEmail, replyEmail } from '@/api/staff'
import paging from '@/components/paging'

export default {
  name: 'Email',
  components: {
    paging,
  },
  data() {
    return {
      paramFrom: {
        yourName: null, // 优惠卷码
        page: 1,
        pageSize: 10,
        email: null, // 状态
        accountSource: null, //是否回复
        replyContent: null, //回复内容
        replyTime: null, //回复时间
      },
      showVisible: false,
      tableData: [

      ],
      ruleForm: {
        couponCode: null, //优惠卷码
        value: null, // 优惠卷折扣数值
        scopeOfUse: null, // 优惠卷类型
      },
      status: 0,
      total: 0,
      // 参数
      dialogVisible: false,
      detailVisible: false,
      EditVisible: false,
      currid: null,
      couponCode: null,
      staffid: null,
      statusList: [
        { id: null, value: '全部' },
        { id: 0, value: '未使用' },
        { id: 1, value: '已下发' },
        { id: 2, value: '已使用' },
        { id: 3, value: '已过期' },
      ],
      detailFrom: {
        replyContent: null, //回复内容
        replyTime: null, //回复时间
      },
      editFrom: {
        mailContent: null,//回复内容
        email: null,//邮箱
        id: null,
      },
      rules: {
        mailContent: [
          { required: true, message: '请输入回复内容', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
      },
    }
  },

  mounted() {
    this.getEmailList()
  },

  methods: {
    // 后期要改
    handleSizeChange(val) {
      this.paramFrom.pageSize = val
      this.getEmailList()
    },
    handleCurrentChange(val) {
      this.paramFrom.page = val
      this.getEmailList()
    },

    async getEmailList() {
      const res = await getEmailListArr(this.paramFrom)
      this.tableData = res.records
      this.total = res.total
    },
    // 搜索
    query() {
      this.getEmailList()
    },
    // 删除
    delBtn(row) {
      this.staffid = row.id
      this.showVisible = true
    },
    // 取消
    handleClose() {
      this.showVisible = false
    },
    // 确定删除
    delBtnOK() {
      const res = deleteEmail(this.staffid)
      this.getEmailList()
      this.showVisible = false
      this.getEmailList()
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    },

    // 点击详情
    detail(row) {
      this.detailVisible = true
      console.log(row, 'row')
      this.detailFrom.replyContent = row.replyContent
      this.detailFrom.replyTime = row.replyTime
    },
    // 详情关闭
    handleCloseDetail() {
      this.detailVisible = false
    },

    // 点击回复
    EditBtu(row) {
      console.log(row, 'row')
      this.EditVisible = true
      this.editFrom.id = row.id
      this.editFrom.email = row.email
    },
    // 回复关闭
    handleCloseEdit() {
      this.EditVisible = false
    },
    // 提交回复
    EditOk() {
      this.$refs.editFrom.validate(valid => {
        if (valid) {
          replyEmail(this.editFrom).then(res => {
            this.$message({
              message: res.paymentResult,
              type: 'success'
            })
            this.getEmailList()
          })
          this.EditVisible = false
        } else {
          return false
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .topbut input::-webkit-outer-spin-button,
::v-deep .topbut input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep .topbut input[type="number"] {
  -moz-appearance: textfield;
}

::v-deep .botbut inpit {
  border: none
}
</style>
